<script setup lang="ts">
import { computed } from "vue";
import CustomIcon from "@/components/framework/icon";
import { useCustomTheme } from "./store.ts";

const theme = useCustomTheme();

const toggleTheme = () => {
  theme.variant = theme.variant === "light" ? "dark" : "light";
};

const icon = computed(() => (theme.variant === "light" ? "icon-moon" : "icon-sun"));
</script>

<template>
  <div @click="toggleTheme">
    <custom-icon :type="icon" />
  </div>
</template>

<style scoped lang="less"></style>
